<template>
  <div class="about">
    <h2>
    person: name--{{ person.name }} age--{{ person.age }} sex--{{
      person.sex
    }}--score--{{ person.score }}---hobby:{{ person.hobby }}
  </h2>
    <button @click="changeCount">count修改</button>
   
  </div>
</template>

<script lang="ts">
 import {defineComponent} from "vue"
export default defineComponent({
  name :"About",
 
});


</script>
<script lang="ts" setup>
import { ref}from 'vue';

interface PersonType{
  name?: string;
  age?:number;
  sex?:string;
  score?:number;
  hobby?:string[]
}
const person =  ref<PersonType>({
  name: "小明",
  age: 18,
  sex: "男",
  hobby: ["唱", "跳"],
});
console.log(person.value);
// 用ref需要加.avlue
const changeCount=()=>{
  person.value.name = "liming"
  person.value.score = 100
  delete person.value.age;

  (person.value.hobby as string[])[0] = "lol"

}

</script>